import React from 'react';
import { Space, Card, Flex, List, Pagination } from 'antd';
import SearchBar from '@/components/SearchBar/index.jsx';
import { useTable } from '@/hooks/useTable.jsx';
import ListItem from './ListItem';
import styles from './index.module.scss';

const Waiter = () => {
    const {
        loading,
        total,
        data,
        pageSize,
        pageIndex,
        handleChangePage,
        setSearch,
    } = useTable({ url: `https://randomuser.me/api/?results=${15}&inc=name,gender,email,nat,picture&noinfo` });

    return (
        <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
            <SearchBar
                title="服务人员管理"
                loading={loading}
                onSearch={setSearch}
            />
            <Card className={styles.card}>
                <List
                    className="demo-loadmore-list"
                    loading={loading}
                    itemLayout="horizontal"
                    dataSource={data}
                    renderItem={(item) => (<ListItem data={item} />)}
                />
                <Flex justify="flex-end" gap="middle">
                    <Pagination
                        current={pageIndex}
                        pageSize={pageSize}
                        total={total}
                        showSizeChanger
                        showQuickJumper
                        showTotal={(T) => `共 ${T}`}
                        onChange={handleChangePage}
                    />
                </Flex>
            </Card>
        </Space>
    );
};
export default Waiter;
